<template>
  <div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="项目名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="项目代码" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目金额" width="150" align="right">
        <template slot-scope="scope">
          {{ scope.row.money }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="开标时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.date | date-format}}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="开标地点" width="400" align="left">
        <template slot-scope="scope">
          {{ scope.row.location }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目状态" width="200">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="primary">未开审</el-tag>
          <el-tag v-else-if="scope.row.status == 1" type="success">评审中</el-tag>
          <el-tag v-else-if="scope.row.status == 2" type="warning">已初审</el-tag>
          <el-tag v-else-if="scope.row.status == 3" type="warning">已打分</el-tag>
          <el-tag v-else type="danger">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="left" label="状态管理" width="250">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" :disabled="scope.row.status != 0" @click="changeStatus(scope.row)">开启评审
          </el-button>
          <el-button type="danger" size="mini" v-if="scope.row.status == -1" @click="changeStatus(scope.row)">前台展示
          </el-button>
          <el-button type="danger" size="mini" v-else-if="scope.row.status == 3" @click="changeStatus(scope.row)">前台隐藏
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="success" size="mini" :disabled="scope.row.status == 1 || scope.row.status == -1"
            icon="el-icon-edit" @click="openEditDialog(scope.row)"></el-button>
          <el-button type="danger" size="mini" :disabled="scope.row.status != 0" icon="el-icon-delete"
            @click="deleteCurrentRow(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float:right;margin:20px 0px;" layout="total, sizes, prev, pager, next, jumper"
      :hide-on-single-page="false" :current-page.sync="pageInfo.currentPage" :total="total"
      :page-sizes="[10, 50, 100, 200, 500, 999]" :page-size="pageInfo.pageSize" background
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
  // import {
  //   getProject,
  //   deleteProject,
  //   statusProject
  // } from "@/api/project"
  export default {
    data() {
      return {
        list: [],
        listLoading: false,
        total: 0,
        pageInfo: {
          currentPage: 1,
          pageSize: 10
        }
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    mounted() {
      this.getProjectData()
    },
    created() {
      this.$bus.$on("onSaveProject", () => {
        this.getProjectData()
      })
    },
    methods: {
      deleteCurrentRow(id) {
        this.$confirm("确定要删除该项目吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          deleteProject({
            id: id
          }).then(() => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getProjectData()
          })
        }).catch(() => {
          this.$message({
            message: "操作已取消",
            type: "info"
          })
        })
      },
      changeStatus(data) {
        let notice = data.status == 0 ? "确定要开启该项目的评审吗？<br/><span style='color:#F56C6C'>开启后无法修改或暂停！</span>" :
          "确定要结束该项目的评审吗？<br/><span style='color:#F56C6C'>结束后无法再次开启！</span>";
        this.$confirm(notice, "提示", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(() => {
          let newStatus;
          switch (data.status) {
            case 0:
              newStatus = 1; //新项目开审
              break;
            case 3:
              newStatus = -1; //已打分项目前台隐藏
              break;
            case -1:
              newStatus = 3; //已隐藏项目前台显示
              break;
          }
          statusProject({
            newStatus: newStatus,
            id: data.id
          }).then(res => {
            this.$message({
              message: "操作成功",
              type: "success"
            })
            this.getProjectData()
          })
        }).catch(() => {
          this.$message({
            message: "操作已取消",
            type: "info"
          })
        })
      },
      openEditDialog(data) {
        this.$bus.$emit('editProjectDialog', data)
      },
      getProjectData() {
        // getProject(this.pageInfo).then(res => {
        //   // console.log(res)
        //   this.list = res.data.rows;
        //   this.total = res.data.total;
        // }).catch(e => {
        //   this.total = 0;
        //   this.list = [];
        //   console.log("error", e)
        // })
      },
      // 分页处理
      handleCurrentChange(currentPage) {
        this.pageInfo.currentPage = currentPage;
        this.getProjectData()
      },
      handleSizeChange(pageSize) {
        this.pageInfo.pageSize = pageSize;
        this.getProjectData()
      }
    }
  }
</script>

<style>
</style>
